<template>
  <div>
    <a-drawer :visible="visible" width="1200" @close="onClose" title="订单详情">
      <a-divider orientation="left">
        订单信息
      </a-divider>
      <a-row :gutter="10">
        <a-col class="detail-item" :span="8"> 订单单号：{{ orderData.orderCode }} </a-col>
        <a-col class="detail-item" :span="8"> 状态：{{ OrderStatus[orderData.orderStatus] }} </a-col>
        <a-col class="detail-item" :span="8">
          订单时间：{{ orderData.createDate }} {{ orderData.createDateTime }}
        </a-col>
        <a-col class="detail-item" :span="8"> 订单金额：{{ orderData.totalAmount }}（元） </a-col>
        <a-col class="detail-item" :span="8"> 手续费：{{ orderData.handlingFee || 0 }}（元） </a-col>
        <a-col class="detail-item" :span="8"> 佣金：{{ orderData.commission || 0 }}（元） </a-col>
      </a-row>
      <a-divider orientation="left">
        收货信息
      </a-divider>
      <a-row class="detail-item" :gutter="10">
        <a-col :span="8"> 用户姓名：{{ orderData.receiver }} </a-col>
        <a-col class="detail-item" :span="8"> 联系电话：{{ orderData.telphone }} </a-col>
        <a-col class="detail-item" :span="8">
          常用快递：
        </a-col>
        <a-col class="detail-item" :span="8"> 取货地址：{{ orderData.address }} </a-col>
        <a-col class="detail-item" :span="8"> 备注：{{ orderData.remarks }} </a-col>
      </a-row>
      <div>
        <a-divider orientation="left">
          订单商品
        </a-divider>
        <!-- <a-button
          type="primary"
          style="margin-bottom: 10px"
          @click="audit"
          v-if="orderData.orderStatus === '60' && type === 2"
          >确认发货</a-button
        > -->
         :columns="orderGoodsColumns" :data-source="orderData.items" :pagination="false">
          <span slot="imgUrl" slot-scope="imgUrl">
            <img v-if="imgUrl" :src="imgUrl" style="width: 50px;height: 50px" />
          </span>
        </a-table>
      </div>
      <!-- v-if="orderData.orderStatus === '110'" -->
      <div v-if="type == 3">
        <a-divider orientation="left">
          退货商品
        </a-divider>
        <div>
          <a-button type="primary" style="margin-bottom: 10px" @click="agree" :loading="loading_agree">同意</a-button>
          <a-button type="primary" style="margin-bottom: 10px;margin-left:20px" @click="dontAgree" :loading="loading_dontAgree">不同意</a-button>
          <a-table :columns="returnGoodsColumns" :data-source="orderData.returns" :pagination="false" rowKey="id">
            <span slot="imgUrl" slot-scope="imgUrl">
              <img v-if="imgUrl" :src="imgUrl" style="width: 50px;height: 50px" />
            </span>
          </a-table>
        </div>
        <!-- <div>
          <a-table :columns="returnGoodsColumns" :data-source="orderData.returns" :pagination="false" rowKey="id"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
            <span slot="imgUrl" slot-scope="imgUrl">
              <img v-if="imgUrl" :src="imgUrl" style="width: 50px;height: 50px" />
            </span>
          </a-table>
        </div> -->
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    type: Number,
    id: String
  },
  data() {
    return {
      selectedRowKeys: [], //退货选中商品
      loading_agree: false,
      loading_dontAgree: false,
      OrderStatus: {
        '-20': '已取消',
        '-10': '取消确认',
        '10': '待支付',
        '-30': '订单失效',
        '60': '待发货',
        '80': '已发货',
        '100': '已完成',
        '110': '退款审批中',
        '120': '退款中',
        '130': '退款完成',
        '140': '退款驳回'
      },
      orderGoodsColumns: [
        {
          title: '商品编号',
          dataIndex: 'number',
          key: 'number'
        },
        {
          title: '商品图片',
          dataIndex: 'imgUrl',
          key: 'imgUrl',
          scopedSlots: { customRender: 'imgUrl' }
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          key: 'productName'
        },
        {
          title: '商品编号',
          key: 'productCode',
          dataIndex: 'productCode'
        },
        {
          title: '单价',
          key: 'price',
          dataIndex: 'price'
        },
        {
          title: '数量（件）',
          key: 'itemNum',
          dataIndex: 'itemNum'
        },
        {
          title: '金额',
          key: 'itemAmount',
          dataIndex: 'itemAmount'
        }
      ],
      returnGoodsColumns: [
        {
          title: '商品编号',
          dataIndex: 'orderCode',
          key: 'orderCode'
        },
        {
          title: '商品图片',
          dataIndex: 'imgUrl',
          key: 'imgUrl',
          scopedSlots: { customRender: 'imgUrl' }
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          key: 'productName'
        },
        {
          title: '商品编号',
          key: 'totalOrderCode',
          dataIndex: 'totalOrderCode'
        },
        {
          title: '单价',
          key: 'price',
          dataIndex: 'price'
        },
        {
          title: '退货数量（件）',
          key: 'current',
          dataIndex: 'current'
        },
        {
          title: '金额',
          key: 'returnAmount',
          dataIndex: 'returnAmount'
        }
      ],
      orderData: {}
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.OrderDetail()
      }
    }
  },
  methods: {
    //关闭弹窗
    onClose() {
      this.$emit('onClose')
    },
    //表格选中事件
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    //获取订单详情
    orderDetail() {
      httpAction(`/order/flpReturnOrder/getReturnOrder?id=${this.id}`, {}, 'get').then(res => {
        if (res.success) {
          this.orderData = res.result
          this.orderData.items.push({
            number: '总计',
            itemNum: this.orderData.items.reduce((pre, cur) => {
              return pre + cur.itemNum
            }, 0),
            itemAmount: this.orderData.items.reduce((pre, cur) => {
              return pre + cur.itemAmount
            }, 0)
          })
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    //发货
    audit() {
      httpAction(
        '/order/flpOrder/audit',
        {
          idList: [this.id],
          status: '60'
        },
        'post'
      ).then(res => {
        this.onClose()
        this.$message.success('发货成功')
      })
    },
    // 同意
    agree() {
      console.log(this.selectedRowKeys)
      // if(this.selectedRowKeys.length>0){
        this.loading_agree = true
      httpAction(
        '/order/flpReturnOrder/auditReturn',
        {
          ids: this.id,
          orderStatus: '120'
        },
        'post'
      ).then(res => {
        if (res.success) {
          this.onClose()
          this.$emit('refreshList')
          this.$message.success('审批成功')
        } else {
          this.$message.warning(res.message)
        }
        this.loading_agree = false
      })
      .catch((e)=>{
        this.loading_agree = false
      })
      // }else{
      //   this.$message.warning('请选择商品')
      // }
    },
    //不同意
    dontAgree() {
      this.loading_dontAgree = true
      // if(this.selectedRowKeys.length>0){
      httpAction(
        '/order/flpReturnOrder/cancelReturn',
        {
          ids: this.id,
          orderStatus: '140'
        },
        'post'
      ).then(res => {
        if (res.success) {
          this.onClose()
          this.$emit('refreshList')
          this.$message.success('审批成功')
        } else {
          this.$message.warning(res.message)
        }
        this.loading_dontAgree = false
      })
      .catch(e=>{
        this.loading_dontAgree = false
      })
      // }else{
      //   this.$message.warning('请选择商品')
      // }
    }
  }
}
</script>

<style scoped>
.detail-item {
  line-height: 30px;
}
</style>
